<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Reserve</title>
<style>
  .queryform {
    background-color: #FFAFAA;
    border: 1px;
  }
</style>
</head>
<body class=" yui-skin-sam">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/calendar/assets/skins/sam/calendar.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/calendar/calendar-min.js"></script>
<script type="text/javascript">
YAHOO.namespace("com.reserveme");

YAHOO.com.reserveme.init = function() {
	function dateToLocaleString(dt, cal) {
            	var dStr = dt.getDate();
            	var mStr = dt.getMonth() + 1;
           	 	var yStr = dt.getFullYear();
           	 	return yStr + "/" + mStr + "/" + dStr;
            	//return (wStr + ", " + dStr + " " + mStr + " " + yStr);
	}

	function mySelectHandler(type,args,obj) {
		var selected = args[0];
		var selDate = this.toDate(selected[0]);
		var date = dateToLocaleString(selDate, this);
		var ele = document.getElementById('date');
		ele.value = date;
		YAHOO.com.reserveme.cal1.hide();
	};

	function myDeselectHandler(type, args, obj) {
		var deselected = args[0];
		var deselDate = this.toDate(deselected[0]);
	};

	YAHOO.com.reserveme.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");

	YAHOO.com.reserveme.cal1.selectEvent.subscribe(mySelectHandler, YAHOO.com.reserveme.cal1, true);
	YAHOO.com.reserveme.cal1.deselectEvent.subscribe(myDeselectHandler, YAHOO.com.reserveme.cal1, true);
}

function showcal() {
	YAHOO.com.reserveme.init();
	YAHOO.com.reserveme.cal1.render();
	YAHOO.com.reserveme.cal1.show();
}

//YAHOO.util.Event.onDOMReady();
</script>
<div class="queryform">
  <div id="cal1Container"></div>
  <form action="/reserve" method="get">
    <div><span>Date: </span><span><input type="text" name="dateParam" id="date" readonly /></span><span><img src="calendar.png" onclick="javascript:showcal()" /></span></div>
    <div><span>Ground: </span><span><input type="text" name="grndParam" id="ground" /></span></div>
    <div><input type="submit" value="Reserve" /></div>
  </form>
</div>

</body>
</html>